import React, { useState } from 'react';
import { Tabs, Button, Toast, Dialog, Tag } from 'antd-mobile';
import {
    SearchOutline,
    LocationOutline
} from 'antd-mobile-icons';
import { useNavigate } from 'react-router-dom';
import '../styles/myAppointments.scss';
import NavHeader from '../components/NavHeader';
import TabBarFooter from '../components/TabBarFooter';

// 预约状态
type AppointmentStatus = '待就诊' | '已完成' | '已取消';

// 预约信息接口
interface Appointment {
    id: string;
    hospital: string;
    doctor: {
        name: string;
        department: string;
        title: string;
        avatar: string;
    };
    date: string;
    time: string;
    day: string;
    patient: {
        name: string;
        age: number;
        gender: '男' | '女';
    };
    status: AppointmentStatus;
    price: number;
}

const MyAppointmentsPage: React.FC = () => {
    const navigate = useNavigate();
    const [activeTab, setActiveTab] = useState<string>('待就诊');

    // 模拟预约数据
    const appointments: Appointment[] = [
        {
            id: '20230720123456',
            hospital: '协和医院',
            doctor: {
                name: '张医生',
                department: '心内科',
                title: '主任医师',
                avatar: '/images/doctor-avatar.png'
            },
            date: '2023-07-20',
            day: '周四',
            time: '10:00',
            patient: {
                name: '张三',
                age: 35,
                gender: '男'
            },
            status: '待就诊',
            price: 150
        },
        {
            id: '20230725654321',
            hospital: '北京大学第一医院',
            doctor: {
                name: '李医生',
                department: '肾科',
                title: '副主任医师',
                avatar: '/images/doctor-avatar.png'
            },
            date: '2023-07-25',
            day: '下周二',
            time: '09:00',
            patient: {
                name: '张大山',
                age: 65,
                gender: '男'
            },
            status: '待就诊',
            price: 120
        },
        {
            id: '20230610123456',
            hospital: '协和医院',
            doctor: {
                name: '王医生',
                department: '内分泌科',
                title: '主任医师',
                avatar: '/images/doctor-avatar.png'
            },
            date: '2023-06-10',
            day: '周五',
            time: '15:30',
            patient: {
                name: '张三',
                age: 35,
                gender: '男'
            },
            status: '已完成',
            price: 180
        },
        {
            id: '20230530123456',
            hospital: '北京友谊医院',
            doctor: {
                name: '刘医生',
                department: '骨科',
                title: '副主任医师',
                avatar: '/images/doctor-avatar.png'
            },
            date: '2023-05-30',
            day: '周二',
            time: '14:00',
            patient: {
                name: '张三',
                age: 35,
                gender: '男'
            },
            status: '已取消',
            price: 130
        }
    ];

    // 按状态筛选预约
    const filteredAppointments = appointments.filter(
        appointment => appointment.status === activeTab
    );

    // 处理返回按钮点击
    const handleBack = () => {
        navigate('/home');
    };

    // 处理搜索按钮点击
    const handleSearch = () => {
        Toast.show('搜索功能开发中...');
        return;
    };

    // 处理取消预约按钮点击
    const handleCancelAppointment = (appointmentId: string) => {
        Dialog.confirm({
            title: '取消预约',
            content: '确定要取消此次预约吗？',
            onConfirm: () => {
                Toast.show({
                    icon: 'success',
                    content: '预约已取消',
                });
                // 实际应用中这里应该调用API取消预约，然后刷新列表
                return;
            },
        });
    };

    // 修复其他Toast调用
    const handleReview = () => {
        Toast.show('评价功能开发中...');
        return;
    };

    const handleRebook = () => {
        Toast.show('重新预约功能开发中...');
        return;
    };

    // 处理导航按钮点击
    const handleNavigate = (hospital: string) => {
        Toast.show({
            content: `导航前往${hospital}`,
            position: 'bottom',
        });
        // 实际应用中这里应该跳转到地图或导航功能
    };

    // 根据状态获取标签颜色
    const getStatusTagColor = (status: AppointmentStatus): string => {
        switch (status) {
            case '待就诊':
                return '#1677ff'; // 蓝色
            case '已完成':
                return '#52c41a'; // 绿色
            case '已取消':
                return '#999999'; // 灰色
            default:
                return '#1677ff';
        }
    };

    // 渲染预约项
    const renderAppointmentItem = (appointment: Appointment) => (
        <div key={appointment.id} className="appointment-item">
            <div className="hospital-row">
                <div className="hospital-name">{appointment.hospital}</div>
                <Tag color={getStatusTagColor(appointment.status)} className="status-tag">
                    {appointment.status}
                </Tag>
            </div>

            <div className="doctor-info">
                <div className="avatar">
                    <img src={appointment.doctor.avatar} alt="医生头像" />
                </div>
                <div className="info-content">
                    <div className="doctor-name">
                        {appointment.doctor.name} · {appointment.doctor.department}
                    </div>
                    <div className="doctor-title">{appointment.doctor.title}</div>
                    <div className="appointment-time">
                        {appointment.date} ({appointment.day}) {appointment.time}
                    </div>
                </div>
                <div className="price">¥ {appointment.price}</div>
            </div>

            <div className="patient-row">
                <div className="patient-info">
                    就诊人: {appointment.patient.name}
                </div>
                <div className="action-buttons">
                    {appointment.status === '待就诊' && (
                        <>
                            <Button
                                className="cancel-btn"
                                size="mini"
                                onClick={() => handleCancelAppointment(appointment.id)}
                            >
                                取消预约
                            </Button>
                            <Button
                                className="navigate-btn"
                                size="mini"
                                onClick={() => handleNavigate(appointment.hospital)}
                            >
                                <LocationOutline />
                                <span>导航前往</span>
                            </Button>
                        </>
                    )}
                    {appointment.status === '已完成' && (
                        <Button
                            className="review-btn"
                            size="mini"
                            onClick={handleReview}
                        >
                            评价就诊
                        </Button>
                    )}
                    {appointment.status === '已取消' && (
                        <Button
                            className="rebook-btn"
                            size="mini"
                            onClick={handleRebook}
                        >
                            重新预约
                        </Button>
                    )}
                </div>
            </div>
        </div>
    );

    return (
        <div className="my-appointments-page">
            {/* 使用公共顶部导航栏组件 */}
            <NavHeader
                title="我的预约"
                backPath="/home"
                right={<SearchOutline fontSize={18} onClick={handleSearch} />}
            />

            {/* 预约状态标签页 */}
            <Tabs
                className="appointment-tabs"
                activeKey={activeTab}
                onChange={key => setActiveTab(key)}
            >
                <Tabs.Tab title="待就诊" key="待就诊" />
                <Tabs.Tab title="已完成" key="已完成" />
                <Tabs.Tab title="已取消" key="已取消" />
            </Tabs>

            {/* 预约列表 */}
            <div className="appointments-list">
                {filteredAppointments.length > 0 ? (
                    filteredAppointments.map(renderAppointmentItem)
                ) : (
                    <div className="empty-state">
                        <div className="empty-icon">📅</div>
                        <div className="empty-text">暂无{activeTab}预约</div>
                    </div>
                )}
            </div>

            {/* 使用公共底部标签栏组件 */}
            <TabBarFooter activeKey="appointments" />
        </div>
    );
};

export default MyAppointmentsPage; 